import React, { useEffect, useState } from 'react';
import { Graph, Shape, Node, Addon, Cell } from '@antv/x6';
import { Button, Col, Row, Form, Input, Select } from 'antd';
export default function index() {
  const [form] = Form.useForm();
  const { Option } = Select;

  let graph: Graph;
  let stencil: Addon.Stencil;
  let curCel: Cell | null;
  // 表单数据定义
  const formData: any = {
    id: null,
    title: null,
    content: null,
  };
  // 所有下拉数据
  const dropdownData: any = {
    tableData: [],
  };

  useEffect(() => {
    //生成画布
    markgraph();
    //生成左侧-模板节点
    buildStencil();
    //左侧数据加载
    stencilLoadData();
    //初始化事件
    initEvent();
    //模拟请求数据
    setTimeout(() => {
      dropdownData.tableData = tableData;
    }, 1000);
  }, []);

  //生成画布
  const markgraph = () => {
    //创建画布
    graph = new Graph({
      container: document.getElementById('container') as HTMLElement,
      height: 600,
      background: {
        color: '#fffbe6', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      panning: {
        enabled: true,
        modifiers: 'shift', //按住shift键并点击鼠标才能触发画布拖拽
      },
      //点击或者套索框选节点
      selecting: {
        enabled: true,
        rubberband: true, // 启用框选
      },
    });
  };
  //画布：toJSON
  const toJson = () => {
    console.log((graph as Graph).toJSON());
  };

  const tableData = [
    {
      id: 1,
      title: '标题1',
      content: '内容1',
    },
    {
      id: 2,
      title: '标题2',
      content: '内容2',
    },
    {
      id: 3,
      title: '标题3',
      content: '内容3',
    },
  ];
  // 左侧模板
  const buildStencil = (): void => {
    stencil = new Addon.Stencil({
      target: graph as Graph,
      stencilGraphWidth: 280,
      // search: { rect: true },
      collapsable: true,
      groups: [
        {
          name: 'basic',
          title: '基础节点',
          // 高度
          graphHeight: 180,
        },
        {
          name: 'combination',
          title: '组合节点',
          // 布局选项
          layoutOptions: {
            // 每行几列
            columns: 1,
            // 左侧边距
            marginX: 60,
          },
          graphHeight: 260,
        },
        // {
        //   name: 'group',
        //   title: '节点组',
        //   graphHeight: 100,
        //   layoutOptions: {
        //     columns: 1,
        //     marginX: 60,
        //   },
        // },
      ],
    });
    document.querySelector('#stencil')?.appendChild(stencil.container);
  };
  // 左侧模板加载数据 stencil.load
  const stencilLoadData = () => {
    // createNode方式
    const bizNode1 = (graph as Graph).createNode({
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        label: {
          fontSize: 12,
          text: '业务节点1',
        },
      },
    });
    // 构造函数方式
    const bizNode2 = new Shape.Rect({
      width: 100,
      height: 50,
      attrs: {
        label: {
          fontSize: 12,
          text: '业务节点2',
        },
      },
    });
    // 节点元数据方式
    const bizNode3: Node.Metadata = {
      width: 100,
      height: 50,
      attrs: {
        label: {
          fontSize: 12,
          text: '业务节点3',
        },
      },
    };

    stencil.load([bizNode1, bizNode2, bizNode3], 'basic');
  };
  // 初始化事件
  const initEvent = () => {
    graph.on('cell:click', ({ cell }) => {
      console.log(cell);
      // 将之前被选中的节点样式清除
      curCel?.attr('body/stroke', null);
      // 新的节点赋值
      curCel = cell;
      // 新的节点边框样式设置为红色
      curCel?.attr('body/stroke', 'red');

      // 将cell data中Id进行赋值
      formData.id = cell.getData()?.id;

      if (formData.id) {
        // 模拟请求数据
        setTimeout(() => {
          const tableDataRow = tableData.filter(
            (item) => item.id === formData.id,
          )[0];
          formData.title = tableDataRow.title;
          formData.content = tableDataRow.content;

          console.log('tableDataRow', tableDataRow);
          console.log('formData', formData);
        }, 100);
      } else {
        formData.title = null;
        formData.content = null;
      }
    });
  };

  return (
    <div>
      <Row>
        <Col span={5}>
          <div id="stencil"></div>
        </Col>
        <Col span={14}>
          <div id="container"></div>
        </Col>
        <Col span={5}>
          <Form
            form={form}
            name="control-hooks"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            autoComplete="off"
          >
            <Form.Item label="数据" name="tableData">
              <Select placeholder="请选择数据">
                {tableData.map((item) => (
                  <Option key={item.id}>{item.title}</Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item label="内容" name="content ">
              <Input readOnly />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 4, span: 20 }}>
              <Button onClick={toJson}>toJSON</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      {/*  */}
    </div>
  );
}
